import React, {Component} from 'react';
import {StyleSheet, View, Image} from 'react-native';
import {H3, Container, Content, Button, Text, Header, Left, Right, Title, Body, Spinner} from 'native-base';
import {getTotal} from '../actions/overtimeAction';

const INITIAL_COUNT = -9999;
export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    getTotal(total => {
      this.setState({total});
    });
  }

  nav(type) {
    this.props.navigator.push({path: '/overtime/add', type});
  }

  render() {
    return (
      <Container>
        <Header>
          <Left><Text> </Text></Left>
          <Body>
          <Title>加班管理</Title>
          </Body>
          <Right>
            {this.props.total !== INITIAL_COUNT && (
              <Button transparent onPress={() => this.props.navigator.push({path: '/overtime/list'})}>
                <Text>列表</Text>
              </Button>
            )}
          </Right>
        </Header>
        <Image source={require('../imgs/a.jpg')}>
          {this.props.total === INITIAL_COUNT && (
            <Spinner/>
          )}
          {this.props.total !== INITIAL_COUNT && (
            <View>
              <View style={style.container}>
                <Text>
                  {'当前剩余加班： ' + this.props.total + ' 小时'}
                </Text>
              </View>
              <View style={style.container}>
                <Button light block
                        onPress={this.nav.bind(this, 'minus')}>
                  <Text>补休</Text>
                </Button>
              </View>
              <View style={style.container}>
                <Button light block
                        onPress={this.nav.bind(this, 'add')}>
                  <Text>加班</Text>
                </Button>
              </View>
            </View>
          )}
        </Image>
      </Container>
    );
  }
}
const style = StyleSheet.create({
  container: {padding: 10}
});
